@import "./split-pane.vars";

// Split Pane
// --------------------------------------------------

.split-pane {
  @include position(0, 0, 0, 0);

  position: absolute;

  display: flex;

  flex-direction: row;
  flex-wrap: nowrap;

  contain: strict;
}

.split-pane-visible > .split-pane-side,
.split-pane-visible > .split-pane-main {
  @include position(0, 0, 0, 0);

  // scss-lint:disable ImportantRule
  position: relative;

  z-index: 0;

  flex: 1;

  box-shadow: none !important;
}

.split-pane-visible > .split-pane-side:not(ion-menu),
.split-pane-visible > ion-menu.split-pane-side.menu-enabled {
  display: flex;

  flex-shrink: 0;

  order: -1;
}

.split-pane-side:not(ion-menu) {
  display: none;
}

.split-pane-visible > ion-menu {
  > .menu-inner {
    @include position-horizontal(0, 0);

    // scss-lint:disable ImportantRule
    width: auto;

    box-shadow: none !important;
    transform: none !important;
  }

  > .ion-backdrop {
    // scss-lint:disable ImportantRule
    display: hidden !important;
  }
}

.split-pane-visible > .split-pane-side[side=start] {
  @include multi-dir() {
    order: -1;
  }
}

.split-pane-visible > .split-pane-side[side=end] {
  @include multi-dir() {
    order: 1;
  }
}

.split-pane-visible > .split-pane-side[side=left] {
  @include ltr() {
    order: -1;
  }

  @include rtl() {
    order: 1;
  }
}

.split-pane-visible > .split-pane-side[side=right] {
  @include ltr() {
    order: 1;
  }

  @include rtl() {
    order: -1;
  }
}
